<template>
<div class="app-container calendar-list-container">
  <div class="filter-container">
        <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="任务ID" v-model="listQuery.jobId"> </el-input>        
        <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">查询</el-button>
      </div>
  <el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
        <el-table-column align="center" label="日志ID" width="200"> <template scope="scope">
              <span>{{scope.row.logId}}</span>
        </template> </el-table-column>
        <el-table-column width="200" align="center" label="任务ID"> <template scope="scope">
            <span>{{scope.row.jobId}}</span>
        </template> </el-table-column>
        <el-table-column width="200" align="center" label="bean名称"> <template scope="scope">
                <span>{{scope.row.beanName}}</span>
        </template> </el-table-column>
        <el-table-column width="200" align="center" label="方法名称"> <template scope="scope">
              <span>{{scope.row.methodName}}</span>
        </template> </el-table-column>
        <el-table-column width="200" align="center" label="参数"> <template scope="scope">
                <span>{{scope.row.params}}</span>
        </template> </el-table-column>
        <el-table-column width="200" align="center" label="状态"> <template scope="scope">
                <span v-if="scope.row.status == 0">成功</span>
                <span v-else>失败</span>
        </template> </el-table-column>
        <el-table-column width="200" align="center" label="耗时(单位:毫秒)"> <template scope="scope">
              <span>{{scope.row.times}}</span>
        </template> </el-table-column>
        <el-table-column width="220" align="center" label="执行时间"> <template scope="scope">
              <span>{{scope.row.createTime}}</span>
        </template> </el-table-column>
  </el-table>
  <div v-show="!listLoading" class="pagination-container">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
  </div>
</div>
</template>

<script>
import {
  getLog
} from '@/api/operative/job/index'
import { mapGetters } from 'vuex'
export default {
  name: 'jobLog',
  data() {
    return {
      form: {
        jobId: ''
      },
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        jobId: ''
      },
      userManager_btn_info: false,
      userManager_btn_edit: false,
      userManager_btn_stop: false,
      userManager_btn_del: false,
      userManager_btn_add: false,
      textMap: {
      },
      tableKey: 0
    }
  },
  created() {
    this.getList()
  },
  computed: {
    ...mapGetters([
      'elements'
    ])
  },
  methods: {
    getList() {
      this.listLoading = true
      console.log(this.listQuery)
      getLog(this.listQuery)
        .then(response => {
          this.list = response.data.rows
          console.log(this.list)
          this.total = response.data.total
          this.listLoading = false
        })
    },
    handleFilter() {
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    resetTemp() {
      this.form = {
        jobId: ''
      }
    }
  }
}
</script>

<style scoped>
label {
    margin: 0px 0px !important;
}
</style>
